<template>
  <el-page-header
    content="博客列表"
    icon=""
    title="博客管理"
  />
  <el-card>
    <el-table
      :data="tableData"
      style="width: 100%"
      size="large"
    >
      <el-table-column
        prop="title"
        label="标题"
        width="200"
      />
      <el-table-column
        label="分类"
        width="200"
      >
        <template #default="scope">
          {{ categoryFormat(scope.row.category) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="内容"
        width="200"
      />
      <el-table-column
        label="发布状态"
        width="200"
      >
        <template #default="scope">
          <el-switch
            v-model="scope.row.isPublish"
            :active-value="1"
            :inactive-value="0"
            @change="handleSwitch(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="更新时间"
        width="200"
      >
        <template #default="scope">
          {{ formatTime.getTime(scope.row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="success"
            circle
            :icon="Star"
            @click="handlePreview(scope.row)"
          ></el-button>
          <el-button
            type="info"
            circle
            :icon="Edit"
            @click="handleEdit(scope.row)"
          ></el-button>
          <el-popconfirm
            title="你确定要删除该文章吗？"
            confirm-button-text="确定"
            cancel-button-text="取消"
            width="200px"
            @confirm="handleDelete(scope.row)"
          >
            <template #reference>
              <el-button
                circle
                :icon="Delete"
                type="danger"
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-dialog
    v-model="dialogVisible"
    title="博客预览"
    width="500"
  >
    <div>
      <h2>{{ previewDate.title }}</h2>
      <div style="margin: 10px 10px;font-size: 12px; color: gray;text-align: right; ">{{
        formatTime.getTime(previewDate.updateTime) }}</div>
      <el-divider>
        <el-icon><star-filled /></el-icon>
      </el-divider>
      <div
        v-html="previewDate.content"
        class="htmlContent"
      ></div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import formatTime from '@/utils/formatTime'
import { Star, Delete, Edit } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import { StarFilled } from '@element-plus/icons-vue'
const router = useRouter();
const tableData = ref([]);
const previewDate = ref({});
const dialogVisible = ref(false);
onMounted(() => {
  getTableData();
});
const getTableData = async () => {
  const res = await axios.get("/adminapi/blog/list");
  tableData.value = res.data.data
};
const categoryFormat = (category) => {
  const arr = ['技术文章', '热点新闻', '日常杂谈']
  return arr[category - 1]
}
const handleSwitch = async (row) => {
  const res = await axios.put('/adminapi/blog/publish', {
    _id: row._id,
    isPublish: row.isPublish
  })
  if (res.data.ActionType === "OK") {
    ElMessage.success('操作成功')
    getTableData()
  }
}
const handlePreview = (row) => {
  dialogVisible.value = true
  previewDate.value = row
}
const handleDelete = async (row) => {
  const res = await axios.delete(`/adminapi/blog/${row._id}`)
  if (res.data.ActionType === 'OK') {
    ElMessage.success('删除成功')
    getTableData()
  }
}
const handleEdit = (row)=> {
  router.push(`/blog-manage/blogedit/${row._id}`)
}
</script>

<style lang="scss" scoped>
.el-card {
  margin-top: 20px;
}

::v-depp .htmlContent {
  font-size: 16px;

  img {
    max-width: 100%;
  }

}
</style>